<style>
    *{padding:0;margin:0}
    html,body {
        height: 100%;
        background-color: #000;
    }
    div{
        position: fixed;
        left: 0px;
        top: 0px;
        width: 150px;
        height: 30px;
        border: solid 5px white;
    }
    span{

        height: 30px;
        background-color: red;
        display: block;
    }
</style>

<body>
    <div>
        <span style="width: 150px;"></span>
    </div>
</body>

<script>


var num =parseInt(document.querySelector('span').style.width)
setInterval(function() {
   num-=1
   document.querySelector('span').style.width=num+"px"
    if (num == 0){
       alert('game over')
    } 
},100)


// ### 随机出现星星
// 1 定时器1s
// 2 定时器函数中
// 2.1 造星星
// 2.2 随机宽度
// 2.3 定位随机范围
// 2.4 追加到页面
setInterval(function (){
    var imgObj =document.createElement('img')
    imgObj.src = './star.gif'

    var min =40
var max =50
imgObj.width =Math.floor(Math.random()*(max-min+1)+min)

imgObj.style.position='absolute'
var min = 0
var max = document.documentElement.clientHeight||window.innerHeight-imgObj.height
imgObj.style.top=Math.floor(Math.random()*(max-min+1)+min)+'px'
var max = document.documentElement.clientWidth||window.innerWidth-imgObj.width
imgObj.style.left = Math.floor(Math.random()*(max-min+1)+min)+'px'

document.body.appendChild(imgObj)
},1000)


   // ### 删除
// 1 给body绑定点击事件
// 2 事件处理函数中
// 2.1 获取事件对象
// 2.2 获取操作的标签
// 2.3 判断是否是img 是删除  （注：因为body里面还有很多其他的标签
// 父节点.removeChild(子节点)
var bodyObj = document.body
bodyObj.onclick = function(evt) {
    var e =evt ||window.event
    var target = e.target || e.srcElement
    if (target.nodeName ==='IMG'){
        bodyObj.removeChild(target)
        num+=10
        document.querySelector('span').style.width=num+"px"
    }
    
}














</script>
